<template>
    <div class="shopcar-container">
        <div class="goods-list">
            <!-- 商品列表项区域 -->
			<div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<mt-switch></mt-switch>
                        <img src="https://img14.360buyimg.com/n0/jfs/t1/56664/19/9064/83917/5d67465eE0dfdc2d8/cbd56d8b65ea68f8.jpg" alt="">
                        <div class="info">
                            <h1>冰翡翠 游戏智能手机 小米 红米</h1>
                            <p>
                                <span class="price">$2199</span>
                                <a href="#">删除</a>
                            </p>
                        </div>
                    </div>
				</div>
			</div>
            <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<mt-switch></mt-switch>
                        <img src="https://img14.360buyimg.com/n0/jfs/t1/56664/19/9064/83917/5d67465eE0dfdc2d8/cbd56d8b65ea68f8.jpg" alt="">
                        <div class="info">
                            <h1>冰翡翠 游戏智能手机 小米 红米</h1>
                            <p>
                                <span class="price">$2199</span>
                                <a href="#">删除</a>
                            </p>
                        </div>
                    </div>
				</div>
			</div>
            <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<mt-switch></mt-switch>
                        <img src="https://img14.360buyimg.com/n0/jfs/t1/56664/19/9064/83917/5d67465eE0dfdc2d8/cbd56d8b65ea68f8.jpg" alt="">
                        <div class="info">
                            <h1>冰翡翠 游戏智能手机 小米 红米</h1>
                            <p>
                                <span class="price">$2199</span>
                                <a href="#">删除</a>
                            </p>
                        </div>
                    </div>
				</div>
			</div>
            <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<mt-switch></mt-switch>
                        <img src="https://img14.360buyimg.com/n0/jfs/t1/56664/19/9064/83917/5d67465eE0dfdc2d8/cbd56d8b65ea68f8.jpg" alt="">
                        <div class="info">
                            <h1>冰翡翠 游戏智能手机 小米 红米</h1>
                            <p>
                                <span class="price">$2199</span>
                                <a href="#">删除</a>
                            </p>
                        </div>
                    </div>
				</div>
			</div>
        </div>
        
         <!-- 结算区域 -->
         <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner jiesuan">
                        <div class="left">
                            <p>总计（不含运费）</p>
                            <p>已勾选商品<span class="red">0</span>件，总价￥<span class="red">0</span></p>
                        </div>
                          <mt-button type="danger">去结算</mt-button>
					</div>
				</div>
			</div>
        </div>

   

</template>

<script>

export default {
    
}
</script>

<style lang="stylus" scoped>
.shopcar-container{
    background-color:#eee;
    overflow:hidden;
    .goods-list{
        .mui-card-content-inner{
            display:flex;
            align-items:center;
        }
        img{
            width:60px;
            height:60px;
        }
        h1{
            font-size:13px;
        }
        .info{
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            .price{color:red;font-weight:bold}
        }
    }
        .jiesuan{
            display:flex;
            justify-content:space-between;
            align-items:center;
            .red{
                color:red;
                font-weight:bold;
                font-size:16px;
      }
  }
}
</style>